<%@ page contentType="text/html;charset=UTF-8" trimDirectiveWhitespaces="true"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ include file="/WEB-INF/views/include/constrant.jsp"%>
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="${ctxStatic }/wx/css/pensonal.css" />
	<link href="${ctxStatic }/wx/mui/css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="${ctxStatic }/wx/css/setting.css" />
	<script src="${ctxStatic }/wx/mui/js/mui.min.js"></script>
	<script src="${ctxStatic }/wx/mui/js/mui.view.js "></script>
	<script src="${ctxStatic }/zepto/zepto.min.js"></script>
	<script src="${ctxStatic }/wx/js/xiake.js"></script>
	<title>关于发票</title>
</head>
	<body class="mui-fullscreen">
		<!--页面主结构开始-->
		<div id="app" class="mui-views">
			<div class="mui-view">
				<div class="mui-navbar"></div>
				<div class="mui-pages"></div>
			</div>
		</div>
		<!--页面主结构结束-->
		<!--单页面开始-->
		<div id="invoice-total" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left"  style="color: #fff;">
					<span class="mui-icon mui-icon-left-nav"  style="color: #fff;"></span>我的
				</button>
				<h1 class="mui-center mui-title"  style="color: #fff;">关于发票</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell" id="kp">
								<i class="person-ico">
									<img src="${ctxStatic }/wx/images/kaipiao_fapiao@2x.png" />
								</i>
								<a href="#invoice-a" class="mui-navigate-right">立即开票</a>
							</li>
							<li class="mui-table-view-cell" id="jl">
								<i class="person-ico">
									<img src="${ctxStatic }/wx/images/jilu_kaipiao@2x.png" />
								</i>
								<a href="#invoice-b" class="mui-navigate-right">开票记录</a>
							</li>
							<li class="mui-table-view-cell">
								<i class="person-ico">
									<img src="${ctxStatic }/wx/images/xinxi_kaipiao@2x.png" />
								</i>
								<a href="#invoice-c" class="mui-navigate-right">开票信息</a>
							</li>
							<li class="mui-table-view-cell">
								<i class="person-ico ">
									<img src="${ctxStatic }/wx/images/guize_kaipiao@2x.png" />
								</i>
								<a href="#invoice-d" class="mui-navigate-right">开票规则</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<!--单页面结束-->
		<div id="invoice-a" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left"  style="color: #fff;">
					<span class="mui-icon mui-icon-left-nav"  style="color: #fff;"></span>关于发票
				</button>
				<h1 class="mui-center mui-title"  style="color: #fff;">立即开票</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view billing-wrap" id="ul0"></ul>
					</div>
				</div>
			</div>
			<nav class="mui-bar mui-bar-tab bil-b-fixed">
				<div class="mui-col-xs-6 bil-b-m">
					<p>
						<span>开票金额：</span>
						<span style="font-size: 18px;"></span>
					</p>
				</div>
				<div class="mui-col-xs-6 bil-b-next">
					<a>下一步</a>
				</div>
			</nav>
		</div>
		<div id="invoice-b" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left"  style="color: #fff;">
					<span class="mui-icon mui-icon-left-nav"  style="color: #fff;"></span>关于发票
				</button>
				<h1 class="mui-center mui-title"  style="color: #fff;">开票记录</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view billing-wrap" id="ul1">
							<li class="mui-table-view-cell record-ii"></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div id="invoice-c" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left"  style="color: #fff;">
					<span class="mui-icon mui-icon-left-nav"  style="color: #fff;"></span>关于发票
				</button>
				<h1 class="mui-center mui-title"  style="color: #fff;">开票信息</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="invoice-form">
							<form id="inputForm" class="mui-input-group" method="post" action="${ctxFront}/mobile/saveUserRcptInfo">
							    <input type="hidden" name="userid" value="1" />
							    <div class="mui-input-row">
							        <label>发票类型</label>
							        <input type="text"  value="增值税普通发票" disabled="disabled" readonly name="rcpttype">
							    </div>
							    <div class="mui-input-row">
							        <label>发票抬头</label>
							        <input type="text"  name="title"
							        placeholder="个人/企业名称" id="title"  >
							    </div>
							    <div class="mui-input-row">
							        <label>纳税人识别号</label>
							        <input type="text"  placeholder="企业必填" name="dutyParagraph"  id="dutyParagraph">
							    </div>
							    <div class="mui-input-row">
							        <label>发票内容</label>
							        <input name="content" type="text" placeholder="为保证您的权益,请准确填写" id="content" value="代办租车费">
							    </div>
							    <div class="mui-input-row">
							        <label>收件人</label>
							        <input name="receiver" type="text" placeholder="请输入收件人名称" id="receiver">
							    </div>
							    <div class="mui-input-row">
							        <label>手机号码</label>
							        <input name="mobile" type="text" placeholder="请输入手机号" id="mobile">
							    </div>
							    <div class="mui-input-row">
							        <label>地址</label>
							        <input name="address" type="text" placeholder="请输入收件地址" id="address">
							    </div>
							    <div class="mui-input-row">
							        <label>邮编</label>
							        <input name="postcode" type="text" placeholder="请输入邮编" id="postcode">
							    </div>
							    <div class="form-rule">
							    	<a href="#invoice-d">开票规则</a>
							    </div>
							    <div class="form-btn">
							    	 <input type="button" id="presevat" value="保存" >
							    </div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="invoice-d" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left"  style="color: #fff;">
					<span class="mui-icon mui-icon-left-nav"  style="color: #fff;"></span>关于发票
				</button>
				<h1 class="mui-center mui-title"  style="color: #fff;">开票规则</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="bill-rule">
							<p>1、开票内容仅支持代办租车费，发票类型仅支持增值税普通发票。</p>
							<p>2、您可按订单申请开票，可开票金额为订单实际支付金额。</p>
							<p>3、单次申请开票合计满1000元包邮，不满1000元邮费到付,暂不支持港澳台地区包邮。</p>
							<p>4、开具发票需提供：发票抬头、收件人及电话、邮寄地址、邮编。</p>
							<p>5、增值税普通发票我们将在3-7个工作日寄出。</p>
							<p>6、因个人原因导致发票退回重开，所产生的往返快递费用由您自行承担。</p>
						</div>
					</div>
				</div>
			</div>
		</div>
</body>
 <script>
    	mui.init();
		//初始化单页view
		var viewApi = mui('#app').view({
			defaultPage: '#invoice-total'
		});
		//开票
		$('#kp').on('tap', function() {
			mui.post('${ctxFront}/mobile/rcptOrders',{
					userid:'${sessionScope.front_user.id}',
					pageNo:1,
					pageSize:500,
				},function(d){
					if(d.code=='200'){
						appendData2(d);
					}else{
						mui.alert(d.message)
					}
		}, 'json');
		})
		//开票记录
		$('#jl').on('tap', function() {
			mui.post('${ctxFront}/mobile/rcptHistory',{
					userid:'${sessionScope.front_user.id}',
					pageNo:1,
					pageSize:500,
				},function(d){
					if(d.code=='200'){
						appendData(d);
					}else{
						mui.alert(d.message)
					}
		}, 'json');
		})
		$('#presevat').on('tap', function() {
			check();
		})
		//初始化单页的区域滚动
		mui('.mui-scroll-wrapper').scroll();
		var view = viewApi.view;
		(function($) {
			//处理view的后退与webview后退
			var oldBack = $.back;
			$.back = function() {
				if (viewApi.canBack()) { //如果view可以后退，则执行view的后退
					viewApi.back();
				} else { //执行webview后退
					oldBack();
				}
			};
		})(mui);
    		function appendData(d){
		var sm = d.data.rcptList;
		var table = document.getElementById("ul1");
		table.innerHTML = "";//清空数据
		for (var i=0;i<sm.length;i++) {
			var status = "";
			if (sm[i].rcptStatus=='1') {
				status = "开票申请中";
			} else if(sm[i].rcptStatus=='2'){
				status = "已开发票";
			} 
			var li = document.createElement("li");
			li.className = "mui-table-view-cell record-ii";
			var str = "";
			str += "<div class='record'>";
            str += "<p>";
            str += "<span class='record-title'>开票抬头</span>";
            str += "<span class='record-txt'>"+sm[i].title+"</span>";
            str += "</p>";
            str += "<p>";
            str += "<span class='record-title'>开票金额</span>";
            str += "<span class='record-txt'>￥"+sm[i].totalPrice+"</span>";
            str += "</p>";
            str += "<p>";
            str += "<span class='record-title'>申请时间</span>";
            str += "<span class='record-txt'>"+sm[i].createDate+"</span>";
            str += "</p>";
            str += "<p>";
            str += "<span class='record-title'>状态</span>";
            str += "<span class='record-txt'>"+status+"</span>";
            str += "</p>";
			str += "</div>";
			li.innerHTML = str;
	        table.appendChild(li);
		}
	}
		function appendData2(d){
		var sm = d.data.ordersList;
		var table = document.getElementById("ul0");
		table.innerHTML = "";//清空数据
		for (var i=0;i<sm.length;i++) {
			var li = document.createElement("li");
			li.className = "mui-table-view-cell billing-ii";
			var str = "";
			str += "<div class='billing'>";
			str += "<span class='b-selected'>";
			str += "<i class='mui-icon mui-icon-checkmarkempty'></i>";
			str += "</span>";
			str += "<p class='billing-time'>"+sm[i].createDate+"</p>";
			str += "<p class='billing-line'>"+sm[i].ordername+"</p>";
			str += "<div class='billing-b'>";
			str += "<span class='billing-m'>可开票金额：￥"+sm[i].dueamount+"</span>";
			str += "<span class='billing-m'>额外费用：￥800</span>";
			str += "<span class='billing-more'><i class='mui-icon mui-icon mui-icon-plusempty'></i></span>";
			str += "</div>";
			str += "</div>";
			li.innerHTML = str;
	        table.appendChild(li);
		}
		$('.billing-ii').on('tap', function() {
    			if(!$(this).find('.b-selected').hasClass('b-selec-g')){
    		         $(this).find('.b-selected').addClass('b-selec-g')
    			}else{
    				$(this).find('.b-selected').removeClass('b-selec-g')
    		}
		});
	}
		function check(){
		var title = $('#title');
		var receiver = $('#receiver');
		var address = $('#address');
		var postcode = $('#postcode');
		var dutyParagraph = $('#dutyParagraph');
		var content = $('#content');
		var r = /^1[3|4|5|7|8]\d{9}$/;
		var r2 = /^[1-9][0-9]{5}$/;
		var mobile = $('#mobile');
		if($.trim(title.val())==''){
			mui.toast('请填写发票抬头！');
			return;
		}
		if($.trim(dutyParagraph.val())==''){
			mui.toast('税号格式不正确！');
			return;
		}
		if($.trim(content.val())==''){
			mui.toast('发票内容必填！');
			return;
		}
		if($.trim(receiver.val())==''){
			mui.toast('收件人不能为空！');
			return;
		}
		if($.trim(mobile.val()) == ''){
			mui.toast('请填写手机号');
			return;
		} else if(!r.test(mobile.val())){
			mui.toast('手机号不正确');
			return;
		}
		if($.trim(address.val())==''){
			mui.toast('地址不能为空');
			return;
		}
		if($.trim(postcode.val()) == ''){
			mui.toast('请填写邮编');
			return;
		} else if(!r2.test(postcode.val())){
			mui.toast('邮编不正确');
			return;
		}
		$('#inputForm').submit();
		window.location.href = "${ctxWx}/pu/fpPage";
	}
	</script>
</html>